<!-- 租金情况 -->
<template>
  <div class=''>
    <el-row class="title">
      <span>基础数据</span>
    </el-row>
    <el-row class="card-title" :gutter="32">
      <el-card class="card-title1">
        <el-tooltip effect="light" placement="top">
          <div slot="content"><span style="font-size:18px;">当年实际收入 = 当年已收合同租金 + 当年实收历欠租金 + 当年预收合同租金</span></div>
          <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
            <div class="title_1">当年实际收入 <i class="el-icon-question"></i></div>
            <div class="title_2">{{totals.total6|format}}</div>
          </el-col>
        </el-tooltip>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">当年已收合同租金</div>
          <div class="title_2">{{totals.total2|format}}</div>
        </el-col>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">当年预收合同租金</div>
          <div class="title_2">{{totals.total5|format}}</div>
        </el-col>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">当年实收历欠租金</div>
          <div class="title_2">{{totals.total4|format}}</div>
        </el-col>
        <el-tooltip effect="light" placement="bottom">
          <div slot="content"><span style="font-size:18px;">当年应收合同租金 = 当年已收合同租金 + 当年未收合同租金</span></div>
          <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
            <div class="title_1">当年应收合同租金 <i class="el-icon-question"></i></div>
            <div class="title_2">{{totals.total1|format}}</div>
          </el-col>
        </el-tooltip>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">当年已收合同租金</div>
          <div class="title_2">{{totals.total2|format}}</div>
        </el-col>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">当年未收合同租金</div>
          <div class="title_2">{{totals.total3|format}}</div>
        </el-col>
        <el-col style="margin-bottom:10px" :xs="24" :sm="24" :lg="6">
          <div class="title_1">应收历欠租金</div>
          <div class="title_2" style="color:red !important">{{totals.total7|format}}</div>
        </el-col>
      </el-card>
    </el-row>
    <el-row class="row_spacing" :gutter="32">
      <el-col :xs="24" :sm="24" :lg="18">
        <el-card class="chart-wrapper">
          <bar-chart4 v-if="JSON.stringify(barData)!='{}'" :barData="barData" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card class="chart-wrapper">
          <select @change="monthChange" v-model="month" class="month_select" name="rent">
            <option class="month-opt" v-for="(item,i) in mouthOption" :value="i" :key="i">{{item}}</option>
          </select>
          <pie-chart v-if="JSON.stringify(pieData)!='{}'" :height="height3" :pieData="pieData" />
        </el-card>

      </el-col>
    </el-row>
    <el-row class="title">
      <span>数据分析</span>
    </el-row>
    <el-row :gutter="32">
      <el-card class="chart-wrapper">
        <el-row :gutter="32" class="tools">
          <el-cascader size="mini" v-model="type" :options="typeOptions" :props="{ expandTrigger: 'hover' }" @change="selectTypeChange"></el-cascader>
          <el-select v-model="value" size="mini" @change="selectChange" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-radio-group @change="radioChange" v-model="radio" size="mini">
            <el-radio-button v-for="(item,index) in radios" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
          <el-date-picker v-if="value==='1'" v-model="time" type="daterange" align="right" @change="dateChange" unlink-panels value-format="timestamp" size="mini" style="float:right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-row>
        <bar-chart v-if="JSON.stringify(barOptions)!='{}'&&value==='1'" :barData="barOptions"></bar-chart>
        <bar-chart2 v-if="JSON.stringify(barOptions2)!='{}'&&value==='2'" :barData="barOptions2"></bar-chart2>
        <bar-chart3 v-if="JSON.stringify(barOptions3)!='{}'&&value==='3'" :barData="barOptions3"></bar-chart3>
      </el-card>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import PieChart from "../components/PieChart";
import PieChart2 from "../components/PieChart2";
import PieChart3 from "../components/PieChart3";
import BarChart from "../components/BarChart";
import BarChart2 from "../components/BarChart2";
import BarChart3 from "../components/BarChart3";
import BarChart4 from "../components/BarChart4";
import SimpleBarChart from "../components/SimpleBarChart";
import Radar from "../components/Radar";
import { format } from "path";
import { pickerOptions, computeTime } from "@/utils/index";
import {
  getReceivable,
  getTake,
  getNoTake,
  getReceived,
  getThroughOwe,
  getAssetsData,
  getPrecollected,
  getHireCon,
  getMonCon,
  getYingShouLQ,
  getPropertyBar,
  getRentData
} from "@/api/charts";
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    PieChart,
    PieChart2,
    PieChart3,
    Radar,
    BarChart,
    BarChart2,
    BarChart3,
    BarChart4,
    SimpleBarChart
  },
  data() {
    //这里存放数据
    return {
      tootip1: "当年应收合同租金=<br/>当年实际收入=",
      assetNum: {},
      assetArea: {},
      assetType: {},
      assetStructure: {},
      rentArea: {},
      vacancyArea: {},
      hire: {},
      rentNum: {},
      month: "0",
      height: "200px",
      height3: "400px",
      totals: {
        total1: "",
        total2: "",
        total3: "",
        total4: "",
        total5: "",
        total6: "",
        total7: ""
      },
      mouthOption: [
        "选月份",
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ],
      time: [],
      radio: "一年",
      type: ["1"],
      barOptions: {},
      barOptions2: {},
      barOptions3: {},
      changeData: {},
      changeType: "data1",
      barCountData: {},
      barAreaoData: {},
      barTypeData: {},
      pieData: {},
      barData: {},
      barData1: {},
      radios: ["一月", "三月", "半年", "一年", "全部"],
      options: [
        {
          value: "1",
          label: "基础列表"
        },
        {
          value: "2",
          label: "二年同列"
        },
        {
          value: "3",
          label: "三年同列"
        }
      ],
      typeOptions: [
        {
          value: "1",
          label: "按资产数量"
        },
        {
          value: "2",
          label: "按资产面积"
        },
        {
          value: "3",
          label: "按合同户数"
        },
        {
          value: "4",
          label: "按月租金收入"
        },
        {
          value: "5",
          label: "按巡查处数"
        },
        {
          value: "6",
          label: "按隐患处数"
        },
        {
          value: "7",
          label: "正在整改处数"
        },
        ,
        {
          value: "8",
          label: "未整改处数"
        },
        {
          value: "9",
          label: "无隐患资产占比"
        },
        {
          value: "10",
          label: "隐患资产占比"
        },
        {
          value: "11",
          label: "本年已整改隐患占比"
        }
      ],
      // typeOptions: [
      //   {
      //     value: "01",
      //     label: "租金明细",
      //     children: [
      //       {
      //         value: "1",
      //         label: "年度应收租金"
      //       },
      //       {
      //         value: "2",
      //         label: "年度已收租金"
      //       },
      //       {
      //         value: "3",
      //         label: "年度未收租金"
      //       },
      //       {
      //         value: "4",
      //         label: "年度实收租金"
      //       },
      //       {
      //         value: "5",
      //         label: "年度实收历欠租金"
      //       },
      //       {
      //         value: "6",
      //         label: "年度预收租金"
      //       }
      //     ]
      //   }
      // ],
      pickerOptions: {
        shortcuts: pickerOptions
      },
      value: "1"
    };
  },
  //监听属性 类似于data概念
  computed: {},
  filters: {
    format(num) {
      // var reg = /\d{1,4}(?=(\d{4})+$)/g;
      // return (num + "").replace(reg, "$&,");
      return (num / 1e4).toFixed(1) + "万元";
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    change() {},
    updateOption() {
      //单列数据
      if (this.value === "1") {
        let start = (
          ((this.barCountData.date.length - 11) /
            this.barCountData.date.length) *
          100
        ).toFixed(2);
        this.barOptions = {
          dataZoom: [{ start: start }],
          xAxis: [{ data: this.barCountData.date }],
          legend: {
            data: [this.barCountData.data1.name]
          },
          series: [
            {
              name: this.barCountData.data1.name,
              data: this.barCountData.data1.value
            }
          ]
        };
      } else if (this.value === "2") {
        this.barOptions2 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            }
          ]
        };
      }
      //多列数据
      else {
        this.barOptions3 = {
          dataset: {
            source: this.barCountData.data1.value
          },
          series: [
            {
              name: this.barCountData.data1.value[0][1]
            },
            {
              name: this.barCountData.data1.value[0][2]
            },
            {
              name: this.barCountData.data1.value[0][3]
            }
          ]
        };
      }
    },
    //下拉分列变化
    selectChange(value) {
      console.log("列数下拉项变化 ", value);
      let year = new Date().getFullYear();
      let start = computeTime(year, 1)[0];
      //防止接口报错
      // if (this.time[0] === start) {
      //   this.time = [];
      // }
      getAssetsData({
        name: this.type[0],
        column: value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //下拉分类变化
    selectTypeChange(value) {
      console.log("分类变化的数据", value);
      getAssetsData({
        name: value[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //单选框事件
    radioChange(value) {
      console.log("单选框值 ", value);
      let start = 0;
      console.log("barOptions", this.barOptions);
      // this.barOptions.dataZoom = [{ start: 0 }];
      switch (value) {
        case "一月":
          this.barOptions.dataZoom[0].start = 100;
          break;
        case "三月":
          start = (
            ((this.barCountData.date.length - 2) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "半年":
          start = (
            ((this.barCountData.date.length - 5) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "一年":
          start = (
            ((this.barCountData.date.length - 11) /
              this.barCountData.date.length) *
            100
          ).toFixed(2);
          this.barOptions.dataZoom[0].start = start;
          break;
        case "全部":
          this.barOptions.dataZoom[0].start = 0;
          break;
        default:
          break;
      }
    },
    //时间切换
    dateChange(value) {
      console.log("时间项值 ", value);
      if (this.time === null) {
        this.time = [];
      }
      getAssetsData({
        name: this.type[0],
        column: this.value,
        time: this.time
      }).then(res => {
        this.barCountData = res;
        this.updateOption();
      });
    },
    //月份切换事件
    monthChange() {
      if (this.month != "0") {
        getMonCon({ month: this.month }).then(res => {
          this.pieData = {
            title: {
              text: "实际收入构成"
            },
            series: [{ name: "实际收入构成", data: res }]
          };
        });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let year = new Date().getFullYear();
    let start = computeTime(year, 1)[0];
    let end = computeTime(year, 12)[1];
    this.time = [start, end];
    getReceivable().then(res => {
      this.totals.total1 = res.年度应收租金;
    });
    getTake().then(res => {
      this.totals.total2 = res.年度已收租金;
    });
    getNoTake().then(res => {
      this.totals.total3 = res.年度未收租金;
    });
    getReceived().then(res => {
      this.totals.total6 = res.年度实收租金;
    });
    getThroughOwe().then(res => {
      this.totals.total4 = res.年度实收历欠租金;
    });
    getPrecollected().then(res => {
      this.totals.total5 = res.年度预收租金;
    });
    getYingShouLQ().then(res => {
      this.totals.total7 = res.应收历欠租金;
    });
    getHireCon().then(res => {
      this.barData = {
        title: {
          subtext: res.data1.name,
          backgroundColor: "#849fe2",
          subtextStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        dataset: {
          source: res.data1.value
        },
        series: [
          {
            name: res.data1.value[0][1],
            type: "bar"
          },
          {
            name: res.data1.value[0][2],
            type: "bar"
          }
        ]
      };
    });
    getMonCon({ month: "1" }).then(res => {
      this.pieData = {
        title: {
          text: "实际收入构成"
        },
        series: [{ name: "实际收入构成", data: res }]
      };
    });
    getAssetsData({ name: "1", column: "1", time: this.time }).then(res => {
      this.barCountData = res;
      const start = (
        ((this.barCountData.date.length - 11) / this.barCountData.date.length) *
        100
      ).toFixed(2);
      this.barOptions = {
        dataZoom: [{ start: start }],
        title: {
          text: res.title,
          subtext: res.title
        },
        xAxis: [{ data: res.date }],
        legend: {
          data: [res.data1.name]
        },
        series: [
          {
            name: res.data1.name,
            data: res.data1.value
          }
        ]
      };
    });
    // axios
    //   .all([
    //     getReceivable(),
    //     getTake(),
    //     getNoTake(),
    //     getReceived(),
    //     getThroughOwe(),
    //     getPrecollected(),
    //     getHireCon(),
    //     getMonCon({ month: "1" }),
    //     getRentData({ name: "1", column: "1", time: this.time })
    //   ])
    //   .then(
    //     axios.spread(
    //       (
    //         total1,
    //         total2,
    //         total3,
    //         total4,
    //         total5,
    //         total6,
    //         bar1,
    //         pie1,
    //         propertybar
    //       ) => {
    //         this.totals.total1 = total1.年度应收租金;
    //         this.totals.total2 = total2.年度已收租金;
    //         this.totals.total3 = total3.年度未收租金;
    //         this.totals.total4 = total4.年度实收租金;
    //         this.totals.total5 = total5.年度实收历欠租金;
    //         this.totals.total6 = total6.年度预收租金;
    //         this.barData = {
    //           title: {
    //             subtext: bar1.data1.name,
    //             backgroundColor: "#849fe2",
    //             subtextStyle: {
    //               color: "#fff",
    //               fontSize: 16
    //             }
    //           },
    //           dataset: {
    //             source: bar1.data1.value
    //           },
    //           series: [
    //             {
    //               name: bar1.data1.value[0][1],
    //               type: "bar"
    //             },
    //             {
    //               name: bar1.data1.value[0][2],
    //               type: "bar"
    //             }
    //           ]
    //         };
    //         this.pieData = {
    //           title: {
    //             text: "月度实收"
    //           },
    //           series: [{ name: "月度实收", data: pie1 }]
    //         };
    //         this.barCountData = propertybar;
    //         const start = (
    //           ((this.barCountData.date.length - 11) /
    //             this.barCountData.date.length) *
    //           100
    //         ).toFixed(2);
    //         this.barOptions = {
    //           dataZoom: [{ start: start }],
    //           title: {
    //             text: propertybar.title,
    //             subtext: propertybar.title
    //           },
    //           xAxis: [{ data: propertybar.date }],
    //           legend: {
    //             data: [propertybar.data1.name]
    //           },
    //           series: [
    //             {
    //               name: propertybar.data1.name,
    //               data: propertybar.data1.value
    //             }
    //           ]
    //         };
    //       }
    //     )
    //   );
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$card-height: 120px;
$title-size: 20px;
.card-title {
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #dce0e4;
  text-align: center;

  .title_1 {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .title_2 {
    color: #0f6cec;
    font-size: $title-size;
  }
  .card-title1 {
    background: url("../../../assets/blue.png");
    height: $card-height;
  }
  .card-title1:hover {
    cursor: pointer;
  }
}

.el-card {
  border: 0px;
}
.tools {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.month_select {
  top: 20px;
  right: 20px;
  position: absolute;
  color: #0f6cec;
  z-index: 100;
  outline: none;
  border: none;
  .month-opt {
    color: #afbac0;
    border: none;
    outline: none;
    /*去掉默认的下拉三角*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
}
// .title_1 {
//   font-size: 18px;
//   color: #34edec;
// }
// .title_2 {
//   font-size: 30px;
//   color: #34edec;
// }
</style>
